<!DOCTYPE html>
<html lang="en"  xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Home</title>
    <th:block th:replace="~{layouts/common::list}"></th:block>
    <style>
        [v-cloak] {
            display: none
        }
        .icon-se .el-select-dropdown__item{
            display: inline-block;
            width: 80px;
            text-align: center;
            font-size: 20px;
        }
        .icon-se .el-select-dropdown__list{
            width: 560px;
        }
    </style>
</head>
<body>
<div id="app">
    <el-button @click="create">新增</el-button>
    <el-button @click="test">新增111</el-button>
    <el-table :data="tableData" style="width: 100%" row-key="id">
        <el-table-column type="selection"></el-table-column>
        <el-table-column prop="title" label="Date" width="180" ></el-table-column>
        <el-table-column prop="icon" label="icon" width="180" >
            <template #default="scope">
                <el-icon v-if="scope.row.icon"><component :is="scope.row.icon"></component></el-icon>
                {{ scope.row.icon }}
            </template>
        </el-table-column>
        <el-table-column prop="weigh" label="weigh" width="100"></el-table-column>
        <el-table-column prop="route" label="route" ></el-table-column>
        <el-table-column prop="type" label="type" >
            <template #default="scope">
                <template v-for="(item, index) in type" >
                    <el-tag :key="item.value" v-if="scope.row.type == item.value"  v-bind="theme[index]">{{ item.desc }}</el-tag>
                </template>
            </template>
        </el-table-column>
        <el-table-column prop="openType" label="openType" >
            <template #default="scope">
                <template v-for="(item, index) in openType" >
                    <el-tag :key="item.value"  v-if="scope.row.openType == item.value" v-bind="theme[index]">{{ item.desc }}</el-tag>
                </template>
            </template>
        </el-table-column>
        <el-table-column label="操作">
            <template #default="scope">
                <el-link type="primary" size="small" icon="edit" @click="update(scope)">编辑</el-link>
                <el-link type="primary" size="small" icon="edit" @click="update1(scope)">编辑1</el-link>
            </template>
        </el-table-column>
    </el-table>
</div>
</body>
<script>
    let { ref, createApp, reactive } = Vue;
    app.create("#app", {
        setup(){
            const tableData = ref([]);
            const openType = ref(JSON.parse('[(${openType})]'));
            const type = ref(JSON.parse('[(${type})]'));

            const theme = ref(sc.tagTheme)

            axios({
                method: 'get',
                url: '/admin-base/route/list-data',
                params: {
                    page: 1,
                    pageSize: 10,
                    // so:[
                    //     {f: 'a', o: 'ASC'},
                    //     {f: 'v.ss', o: 'ASC'},
                    // ],
                    // sf:[
                    //     {f: 'a', v: 'admin', t: 'like'},
                    //     {f: 'b', v: '18', t: '>'},
                    //     {f: 'c', v: '19', t: '>='},
                    //     {f: 'dc.dd', v: ['admin', "aaa", 'test'], t: 'in'},
                    // ]
                }
            }).then(v => {
                tableData.value = v.data.data;
            })

            function create() {
                layer.open({
                    type: 2,
                    title: '新增',
                    area: ['800px', '600px'],
                    content: '/admin-base/route/create',
                    success: function(layero, index, that){
                        let iframeWindow = window['layui-layer-iframe' + index];
                        iframeWindow.LayerIndex = index;
                    }
                });
            }
            function update(scope) {
                console.log(scope)
                layer.open({
                    type: 2,
                    title: '修改',
                    area: ['800px', '600px'],
                    content: '/admin-base/route/update/' + scope.row.id,
                    success: function(layero, index){
                        let iframeWindow = window['layui-layer-iframe' + index];
                        iframeWindow.LayerIndex = index;
                    }
                });
            }

            let formEl, ch;
            setTimeout(() => {
                formEl = getRouteFormEl();
                ch = formEl.formEl.outerHTML;
                console.log(ch)
            }, 10)

            function update1(scope) {
                const id = 'route-form';
                layer.open({
                    type: 1,
                    id: id,
                    title: '修改',
                    area: ['800px', '600px'],
                    content: '',
                    success: function(layero, index){
                        layero.find('#'+id).attr('v-cloak', '').html(ch);
                        formEl.initData(scope.row.id)
                        setTimeout(() => {
                            formEl.appInit(id)
                        }, 10)
                    }
                });
            }

            function test(){
                const id = 'route-form';
                layer.open({
                    type: 1,
                    id: id,
                    title: '新增1',
                    area: ['800px', '600px'],
                    content: '',
                    success: function(layero, index){
                        layero.find('#'+id).attr('v-cloak', '').html(ch);
                        formEl.initData()
                        setTimeout(() => {
                            formEl.appInit(id)
                        }, 10)
                    }
                });
            }


            return {
                tableData,
                openType,
                type,
                theme,
                create,
                update,
                update1,
                test,
            };
        }
    });
</script>
<th:block th:replace="~{base/route/update::update}"></th:block>
</html>